<template>
  <div>
    <div class="set-date">
      <span>时间范围</span>
      <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
    </div>
    <!-- 组件通信：父组件向子组件传递数据 -->
    <Charts :msg="options" v-if="isShow" />

  </div>
</template>

<script>
import { orderTotalData_api } from "@/api/statement.js";
import Charts from "@/components/Charts.vue";
import moment from "moment";
export default {
  components: { Charts },
  data() {
    return {
      dateTime: [],
      options: {
        title: "商品统计",
        legend: ["订单金额"],
        xData: [],
        amountData: [],
      },
      isShow: false,
    };
  },
  methods: {
    //ajax是异步，而echarts是同步
    async orderTotalData() {
      //每次调用之前，要摧毁echarts节点，且amountData，xData要清空
      this.isShow = false;
      this.options.xData = [];
      this.options.amountData = [];

      let res = await orderTotalData_api({
        date: JSON.stringify(this.dateTime),
      });
      res.data.data.forEach((item) => {
        this.options.xData.push(
          moment(item.orderTime).format("YYYY/MM/DD HH:mm:ss")
        );
        this.options.amountData.push(item.orderAmount);
      });
      this.isShow = true;
    },
    onSubmit() {
      this.orderTotalData();
    },
  },
  created() {
    this.orderTotalData();
  },
};
</script>

<style lang="less" scoped>
.set-data {
  color: #606266;
}
/deep/.el-date-editor {
  margin: 0 12px;
  width: 400px;
}

.e-goods {
  width: 100%;
  height: 400px;
  background-color: #fff;
  margin-top: 30px;
  padding: 20px 30px 10px 20px;
}
</style>